<script setup lang="ts">
  import RlButton from '@/components/Button/Button.vue'
  defineOptions({
    name:'ButtonView'
  })
</script>


<template>
  <!-- 基础按钮 -->
  <div>
    <RlButton type="primary">主要按钮</RlButton>
    <RlButton type="success">成功按钮</RlButton>
    <RlButton type="info">信息按钮</RlButton>
    <RlButton type="danger">危险按钮</RlButton>
    <RlButton type="warning">警告按钮</RlButton>
  </div>
  <!-- 朴素按钮 -->
  <div>
    <RlButton type="primary" plain>主要按钮</RlButton>
    <RlButton type="success" plain>成功按钮</RlButton>
    <RlButton type="info" plain>信息按钮</RlButton>
    <RlButton type="danger" plain>危险按钮</RlButton>
    <RlButton type="warning" plain>警告按钮</RlButton>
  </div>
  <!-- 圆角按钮 -->
  <div>
    <RlButton type="primary" round>主要按钮</RlButton>
    <RlButton type="success" round>成功按钮</RlButton>
    <RlButton type="info" round>信息按钮</RlButton>
    <RlButton type="danger" round>危险按钮</RlButton>
    <RlButton type="warning" round>警告按钮</RlButton>
  </div>
  <!-- 圆形按钮 -->
  <div>
    <RlButton type="primary" circle icon="arrow-up" ></RlButton>
    <RlButton type="success" circle icon="magnifying-glass"></RlButton>
    <RlButton type="info" circle icon="key"></RlButton>
    <RlButton type="danger" circle icon="wifi"></RlButton>
    <RlButton type="warning" circle icon="person"></RlButton>
  </div>
</template>
<style scoped>
  div{
    margin-bottom: 10px;
  }
</style>

